<template>
  <div class="os-tabs">
    <template v-for="tab in items"
              :key="tab.value">
      <div class="os-tabs--items"
           :class="tab.value === currentTab ? 'is-active' :''"
           @click="() => $emit('change-tab', tab.value)">
        <div class="os-tabs__label">
          <i class="iconfont"
             :class="tab.icon"
             v-if="tab.icon"></i>{{tab.name}}
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    props: {
      currentTab: {
        type: [String, Number],
        default: 1,
      },
      items: {
        default: [] as any,
      },
    },
    setup() {},
  })
</script>
<style lang="scss" scoped>
  @include b(tabs) {
    display: flex;
    justify-content: center;
    @include m(items) {
      height: 43px;
      line-height: 43px;
      min-width: 120px;
      text-align: center;
      border: 1px solid;
      border-image: linear-gradient(90deg, rgba(34, 50, 66, 0.97), rgba(157, 185, 220, 0.97), rgba(88, 103, 122, 0.97), rgba(55, 71, 87, 0.97)) 1 1;
      transform: skew(-25deg);
      cursor: pointer;
      margin: 5px 4px;
      color: $--color-font;
      box-shadow: 2px 2px 15px 2px $--color-jb6 inset;
      color: $--color-not-active !important;
      @include when(active) {
        color: $--color-hover !important;
        @include jbbg(90deg, $--color-jb5, $--color-jb6);
      }
    }
    @include e(label) {
      transform: skew(25deg);
      i {
        @include jbfont(0deg, $--color-jb1, $--color-jb2);
        margin-right: 5px;
      }
    }
  }
</style>